            <div id="listPlay-info">
                  <?php 
                  switch ($type_elem) {
          //=================================================================================================
          // Info when play album
                    case 'album':
                      # code...
                        echo "  <div id='listPlay-info-img'>
                        <img src='{$upload_path}image/font-album/{$info_elem[0]["strImage"]}' width='120px' height='120px'>
                        </div>
                        <div id='listPlay-info-detail'> 
                          <h2 id='listPlay-info-title' class='listPlay-elemInfo'>{$info_elem[0]['strNameAlbum']}</h2>
                          <span id='listPlay-info-rating' class='listPlay-elemInfo'>Số lượt nghe: {$info_elem[0]['iRating']}</span>
                          <span id='listPlay-info-date' class='listPlay-elemInfo'>Phát hành: {$info_elem[0]['iYear']}</span>";
                        if(strlen($info_elem[0]['strReview'])>0) {
                           echo "
                          <div id='listPlay-info-review' class='listPlay-elemInfo'>{$info_elem[0]['strReview']}</div>
                          <span  class='listPlay-elemInfo'><img src='{$temp_path}image/icon/icon10.gif'><a id='viewAll-detail' rel='friend'> Xem toàn bộ</a> </span>";
                          }                         
                        echo "</div>";
                      break;
          //============================================================================================
          // Info when play playlist 
                    case 'playlist':
                      # code...
                      echo "
                        <div id='listPlay-info-detail' width='630px;'>  
                           <h2 id='listPlay-info-title' class='listPlay-elemInfo'>{$info_elem[0]['strNamePList']}</h2>
                            <span id='listPlay-info-userPlist' class='listPlay-elemInfo'>Đăng bởi: {$info_elem[0]['strName']}</span>";
                            if(strlen($info_elem[0]['strDateCreate'])!=0){
                              echo "<span id='listPlay-info-date' class='listPlay-elemInfo'>Ngày tạo: {$info_elem[0]['strDateCreate']}</span>";
                            } else {
                              echo "<span id='listPlay-info-date' class='listPlay-elemInfo'>Ngày tạo: <span class='not-define'>N/A</span></span>";
                            }

                            
                            if(strlen($info_elem[0]['strComment'])!=0) {
                              echo " <div id='listPlay-info-review' class='listPlay-elemInfo'><?php echo {$info_elem[0]['strComment']}  ?></div>";
                            }
                          
                            echo "</div>";
                      break;
            //===========================================================
            // Info when play video
                      case 'video':
                        # code...
                          echo " 
                      <div id='listPlay-info-detail'>  
                        <h2 id='listPlay-info-title' class='songPlay-elemInfo'>{$info_elem[0]['strFileName']}</h2>
                          <span id='listPlay-info-userPlist' class='songPlay-elemInfo'>Trình bày: <a href='{$url_path}nghe-sy/{$info_elem[0]['titleArtist']}.html'>{$info_elem[0]['strArtist']} </a> ";
                          if(strlen($info_elem[0]['strNameAlbum'])>0){
                            echo "&nbsp;&nbsp;|&nbsp;&nbsp;Album: <a href='{$url_path}nghe-album/{$info_elem[0]['titleAlbum']}/{$info_elem[0]['idAlbum']}.html' >{$info_elem[0]['strNameAlbum']}</a>";
                          }
                          echo "</span>";
                          if (strlen($info_elem[0]['strGenre'])>0) {
                            # code...
                            echo "  <span id='listPlay-info-Genre' class='songPlay-elemInfo'>&nbsp;&nbsp;|&nbsp;&nbsp;Thể loại: <a href='{$url_path}the-loai/{$info_elem[0]['strGenre']}.html' >{$info_elem[0]['titleGenre']}</a></span>";
                          }
                                          
                         echo "</div>";
                        break;
            //==============================================================================
                        //info when play song
                    default:
                      # code...
                         echo " 
                      <div id='listPlay-info-detail'>  
                        <h2 id='listPlay-info-title' class='songPlay-elemInfo'>{$info_elem[0]['strFileName']}</h2>
                          <span id='listPlay-info-userPlist' class='songPlay-elemInfo'>Trình bày: <a href='{$url_path}nghe-sy/{$info_elem[0]['titleArtist']}.html'>{$info_elem[0]['strArtist']} </a> ";
                          if(strlen($info_elem[0]['strNameAlbum'])>0){
                            echo "&nbsp;&nbsp;|&nbsp;&nbsp;Album: <a href='{$url_path}nghe-album/{$info_elem[0]['titleAlbum']}/{$info_elem[0]['idAlbum']}.html' >{$info_elem[0]['strNameAlbum']}</a>";
                          }
                          echo "</span>";
                          if (strlen($info_elem[0]['strGenre'])>0) {
                            # code...
                            echo "  <span id='listPlay-info-Genre' class='songPlay-elemInfo'>&nbsp;&nbsp;|&nbsp;&nbsp;Thể loại: <a href='{$url_path}the-loai/{$info_elem[0]['strGenre']}.html' >{$info_elem[0]['titleGenre']}</a></span>";
                          }
                          if(strlen($info_elem[0]['comment'])>0) {
                             echo "                        
                          <div id='listPlay-info-review' class='songPlay-elemInfo'><?php echo {$info_elem[0]['comment']}  ?></div>
                          <span  class='listPlay-elemInfo'><a id='viewAll-detail' rel='friend'>Xem toàn bộ</a> </span>";
                          }                         
                         echo "</div>";
                      break;
                  }
            
                   ?>

                </div>
              
              <div id="mediaplayer" >
                <?php if($type_elem!='video') { ?>
                <div id='bannerplay'>
                  <img src="<?php echo base_url().'template/image/bannerplay1.png'; ?>" height="150px" width="650px" alt="I Love Music">
                  <div id="background"> </div>
                  <div id="info-songitem">
                    <?php 
                    
                      echo "<span class='infor-lable'>Bài Hát: </span>
                            <span id='infor-label-filename'>{$list_song[0]['strFileName']}</span>";
                      if(strlen($list_song[0]['strArtist'])>0) {
                        echo "
                        <span class='infor-lable'> | </span> 
                        <span class='infor-lable'> Ca Sỹ: </span>  
                        <a id='infor-label-artist' href=''> {$list_song[0]['strArtist']}</a> 
                        ";
                      }
                      if(strlen($list_song[0]['strExtraArtist'])==0) {
                        echo "<span id='space' class='infor-lable'> </span>
                        <a id='infor-label-exartist' href=''> </a>";
                      } else {
                        echo " <span id='space' class='infor-lable'> -  </span><a id='infor-label-exartist' href=''>{$list_song[0]['strExtraArtist']}</a>";
                      }
                     
                     ?>
                    
        
                    
                  </div>
                </div>
                <div id="control-media">
                  <audio id="player2"  autoplay="autoplay" data-current="1" src="<?php echo base_url().'upload/song/'.$list_song[0]['strPath']; ?>" preload type="audio/mp3" controls="controls" width="650px" preload="none">    
                  </audio>
                </div>
             
                   <?php 
                if(count($list_song)>1) {
                  echo "<div id='listsong' >
                  <ul id='playlist'>";
                  $i=1;
                  while ($i<count($list_song)+1) {
                    # code...
                    echo "
                     <li path-data='{$list_song[$i-1]['strPath']}' data-track='{$i}' data-artist='{$list_song[$i-1]['strArtist']}' data-ExtArtist='{$list_song[$i-1]['strExtraArtist']}' class='itemsong'>
                     <span class='list-order'>{$i}</span>
                     <span class='list-itemTitle'>{$list_song[$i-1]['strFileName']}</span>
                     <span class='list-itemArtist'>{$list_song[$i-1]['strArtist']}";

                     if(strlen($list_song[$i-1]['strExtraArtist'])) {
                      echo " - {$list_song[$i-1]['strExtraArtist']}";
                     }
                     echo "</span>
                     <span class='list-itemAction'>
                        <a href='' title='Download' class='list-itemaction-download'> </a>
                        <a href='' title='Add Playlist' class='list-itemAction-addToList'> </a>
                        <a href='' title='Nghe {$list_song[$i-1]['strFileName']}' class='playItemOnly'> </a>
                        </span>
                      </li>
                      
                    ";
                    $i++;
                  }
                  echo "</ul> </div>";
                  }?>
                     <?php }else { ?>
                  
                <div id="control-media">
                    <video width="650" height="360" src="<?php echo "{$upload_path}video/{$info_elem[0]['strPath']}" ?>" type="video/mp4" 
                    id="player2" autoplay="autoplay" 
                    controls="controls" preload="none"></video>
               
              </div>

                 <?php } ?>
              </div>
          </div>
          <div id="content-navright" class="content">
            <div id="content-navright-rank">
              <?php $this->load->view('user/module/content-navright-rank.php') ?>
            </div>

          </div>
 <script type="text/javascript">
$('video,audio').mediaelementplayer();
$('#playlist').slimScroll({
    position: 'right',
    height: 'inherti',
    color: '#f3f3f3',
                    railVisible: true,
                    alwaysVisible: true
});


$('.itemsong').bind('click',function(){
    $('.itemsong').css('color','white');
    $(this).css('color','#54c5ff');
        var totalTracks=$(".itemsong").length;
        $('#infor-label-filename').html($(this).find(":nth-child(2)").text());
        $('#infor-label-artist').html($(this).attr('data-artist'));  
        if($(this).attr('data-ExtArtist').length==0) {
          $('#space').html('');
        }else {
          $('#space').html('-'); 
        }     
        $('#infor-label-exartist').html($(this).attr('data-ExtArtist'));
        $('#player2').attr("src","<?php echo base_url().'upload/song/';?>"+$(this).attr('path-data'));
        $('#player2').attr("data-current",$(this).attr('data-track'));
        $("#player2").get(0).load();
        $("#player2").get(0).play();
        // if($(this).attr("data-current")*1==totalTracks) {
        //   $('#playlist').scrollTop(elem.offset().top);
        // }
          
        // if($(this).attr("data-current")==1) {
        //   $('#playlist').scrollBottom(elem.offset().top);
        // }
           
});

$("#player2").bind("ended",function() {
  var totalTracks=$(".itemsong").length;
  totalTracks=totalTracks*1;
    currentTrack = $("#player2").attr('data-current');
    newTrack = currentTrack*1+1;
    $('#infor-label-filename').html($("li[data-track='"+newTrack+"']").find(":nth-child(2)").text());
    $('#infor-label-artist').html($("li[data-track='"+newTrack+"']").attr('data-artist'));  
    if($("li[data-track='"+newTrack+"']").attr('data-ExtArtist').length==0) {
      $('#space').html('');
      }else {
        $('#space').html('-');
      }
    if(newTrack <= totalTracks+1) {
     $("#player2").attr("src","<?php echo base_url().'upload/song/';?>"+$("li[data-track='"+newTrack+"']").attr('path-data'));
     $('#player2').attr("data-current",newTrack);
     $("#player2").get(0).load();
     $("#player2").get(0).play();
     $('.itemsong').css('color','white');
   $("li[data-track='"+newTrack+"']").css('color','#54c5ff') ;     
        $('#infor-label-exartist').html($("li[data-track='"+newTrack+"']").attr('data-ExtArtist'));
    } else { return false;}
});


$(".itemsong").hover(function(){
 $(this).children(":first-child").html("<img src='<?php echo $temp_path.'image/icon/itemplay.png'; ?>' width='18px' height='18px'>");
  },function(){
     $(this).children(":first-child") .html($(this).attr("data-track"));
  }
);
$("#viewAll-detail").bind('click',function() {
  if($("#listPlay-info-review").css('height')=='60px') {
    $("#listPlay-info-review").css('height','auto');
    $(this).parent().find("img").attr("src","<?php echo $temp_path.'image/icon/icon11.gif'; ?>");
    $(this).text("Thu gọn");

  } else {
     $("#listPlay-info-review").css('height','60px');
      $(this).parent().find("img").attr("src","<?php echo $temp_path.'image/icon/icon10.gif'; ?>");
       $(this).text("Xem toàn bộ");
    
  }
});

$(document).ready(function() {
    // put all your jQuery goodness in here.
    $('.itemsong:first').css('color','#54c5ff');
});

 </script>